<template>
	<view class="flex grid-gap-4">
		<image :src="props.project.thumb" lazy-load mode="scaleToFill"
			style="width: 154rpx;height: 154rpx;border-radius: 16rpx;" />
		<view class="flex-1 flex flex-column grid-gap-2">
			<slot name="title">
				<text class="h8 font-weight-500">{{ props.project.title }}</text>
			</slot>
			<text class="h10 text-placeholder" v-if="props.project.tips">{{ props.project.tips }}</text>
			<view class="flex grid-gap-2">
				<view class="flex flex-center grid-gap-1 rounded-2 border border-primary pl-1 pr-2 py-1">
					<image src="/static/icons/timer.png" mode="scaleToFill" style="width: 14px;height: 14px;" />
					<text class="text-primary h10">{{ props.project.service_duration }}分钟</text>
				</view>
				<view class="flex flex-center grid-gap-1 rounded-2 border border-warning-light-3 pl-1 pr-2 py-1">
					<image src="/static/icons/hot.png" mode="scaleToFill" style="width: 14px;height: 14px;" />
					<x-money :money="props.project.sales_num" type="warning-light-3" unit-type="warning-light-3"
						size="10" unit="人选择" :precision="0"></x-money>
				</view>
			</view>
			<view class="flex flex-column grid-gap-1">
				<view v-if="props.project.overtime_state">
					<text class="h10">加钟：</text>
					<text class="text-danger-light-3 h10" v-if="props.project.overtime_separate">
						{{ props.project.overtime_price }}元/{{ props.project.overtime_duration }}分钟</text>
					<text class="text-primary h10" v-else>跟随项目定价</text>
				</view>
				<view class="w-100 flex flex-y-center flex-x-space-between">
					<x-money type="danger-light-3" weight="bold" size="8" :money="props.project.price" unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
					<slot name="action">
						<button class="btn-primary-light-1 rounded-round px-4 mx-0" size="mini"
							hover-class="btn-primary-hover">立即下单</button>
					</slot>
				</view>
				<text v-if="props.project.last_time"
					class="h10 text-danger-light-3">{{ $func.formatFriendlyTime(props.project.last_time) }}有人购买</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { $func } from "@/utils";
const props = withDefaults(defineProps<{
	project: any
}>(), {
	project: {}
});
</script>

<style lang="scss" scoped></style>